<!DOCTYPE html>
<html>
<head>
<title>JavaScript的事件_1</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<style type="text/css">
.div {
	height: 50px;
	width: 100px;
	background-color: green;
	<!--
	背景颜色--
	>
}
</style>
<script>
	function demo() {
		alert("你好!");
	}
</script>
<script>
	function onOver(ooj) {
		ooj.innerHTML = "Hello";
	}
	function onOut(ooj) {
		ooj.innerHTML = "World";
	}
</script>
<script>
	function onChange(ooj) {
		alert("已修改");
	}
</script>
<script>
	function onSelect(ooj) {
		ooj.style.background="red";
	}
	function onFocus(ooj) {
		ooj.style.background="green";
	}
	function msg() {
		alert("网页内容加载完毕");
	}
</script>
</head>
<body onload="msg()">
	<p>鼠标点击事件--onclick</p>
	<button onclick="demo()">按钮</button>
	<p>鼠标经过事件--onmouseover、鼠标移出事件--onmouseout</p>
	<div class="div" onmouseover="onOver(this)" onmouseout="onOut(this)"></div>
	<p>文本框内容改变事件--onchange</p>
	<input type="text" onchange="onChange(this)">
	<p>文本框选中事件--onselect、光标聚集事件--onfocus</p>
	<input type="text" onselect="onSelect(this)" onfocus="onFocus(this)">
</body>
</html>
